<template>
  <div class="empty-state" :class="{ 'empty-state-compact': compact }">
    <div class="empty-state-content">
      <el-icon v-if="icon" class="empty-state-icon" :size="iconSize">
        <component :is="icon" />
      </el-icon>
      <h3 v-if="title" class="empty-state-title">{{ title }}</h3>
      <p v-if="description" class="empty-state-description">{{ description }}</p>
      <div v-if="$slots.actions" class="empty-state-actions">
        <slot name="actions"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmptyState',
  props: {
    title: {
      type: String,
      default: '暂无数据',
    },
    description: {
      type: String,
      default: '',
    },
    icon: {
      type: [String, Object],
      default: 'Box',
    },
    iconSize: {
      type: [Number, String],
      default: 64,
    },
    compact: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style scoped>
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: var(--spacing-xl, 32px);
  text-align: center;
}

.empty-state-compact {
  min-height: 200px;
  padding: var(--spacing-lg, 24px);
}

.empty-state-content {
  max-width: 400px;
}

.empty-state-icon {
  color: var(--text-tertiary, #909399);
  margin-bottom: var(--spacing-md, 16px);
  opacity: 0.6;
}

.empty-state-title {
  margin: 0 0 var(--spacing-sm, 8px) 0;
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 600;
  color: var(--text-primary, #303133);
}

.empty-state-description {
  margin: 0 0 var(--spacing-lg, 24px) 0;
  font-size: clamp(13px, 2vw, 14px);
  color: var(--text-secondary, #606266);
  line-height: 1.6;
}

.empty-state-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm, 8px);
  flex-wrap: wrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .empty-state {
    min-height: 200px;
    padding: var(--spacing-lg, 24px);
  }

  .empty-state-compact {
    min-height: 150px;
    padding: var(--spacing-md, 16px);
  }

  .empty-state-icon {
    font-size: 48px;
  }
}
</style>


